/*******************************************************************************
 * tuannh ********* function : init interface
 ******************************************************************************/
/* The map and the location bar */
var _div_Map_Tools = _getElementById('div_Map_Tools');
var _divMap = _getElementById('map');
var _divWrapper = _getElementById('wrapper');
var _divScale = _getElementById('scale');
var _divOV = _getElementById('OV');
var _divLocation = _getElementById('location');
var _div_Map_LayerList = _getElementById("div_Map_LayerList");
var _divImg_LayerList = _getElementById("Img_LayerList");
var _divImg_OV = _getElementById("Img_OV");
var _div_Map_divToolbar = _getElementById("div_Map_divToolbar");
var _div_Map_divToolbar_LineExtension = _getElementById("div_Map_divToolbar_LineExtension");

// add feature
var _div_Map_divAddFeature = _getElementById('div_Map_divAddFeature');
var _div_Map_divAddFeature_Attribute = _getElementById('div_Map_divAddFeature_Attribute');

// modify feature
var _div_Map_divModifyFeature = _getElementById('div_Map_divModifyFeature');
var _div_Map_divModifyFeature_Attribute = _getElementById("div_Map_divModifyFeature_Attribute");

// parallel feature
var _div_Map_ParallelFeature = _getElementById("div_Map_ParallelFeature");

// parallel feature
var _div_Map_DirectionFeature = _getElementById("div_Map_DirectionFeature");

// merger feature
var _div_Map_Merger_Feature = _getElementById("div_Map_Merger_Feature");

// measure
var _div_Map_Measure = _getElementById("div_Map_Measure");

var _Img_OV = _getElementById("imgOV");
var _ImgLayerList = _getElementById("imgLayerList");

// hide/show left panel
var _img_Map_ShowHide = _getElementById("img_Map_ShowHide");

// contextmenu layer
var _div_Map_ContextMenuLayer = _getElementById("div_Map_ContextMenuLayer");

/* properties map */
var map_Top = 0;
var map_Left = 0;
var map_Width = 600;
var map_Height = 600;
var width_Toolgle = 10;
var width_LayerList = 150;
var width_OV = 190;
var height_OV = 98;
var width_ImgLayerList = 16;
var width_ImgOV = 21;

// update data
/*******************************************************************************
 * General Function
 ******************************************************************************/
function Image_LayerList_Click() {
	// close
	if (_div_Map_LayerList.offsetWidth > 10) {
		_ImgLayerList.alt = l_imgOV_alt_Open;
		_ImgLayerList.title = l_imgOV_alt_Open;
		_ImgLayerList.src = sPortlet_Img + "plus.png";
		getAttr("_div_Map_LayerList", "display:none;");
		getAttr("_divImg_LayerList", "left:" + (map_Left + map_Width - 12) + "px");
	}
	// open
	else {
		_ImgLayerList.alt = l_imgOV_alt_Close;
		_ImgLayerList.title = l_imgOV_alt_Close;
		_ImgLayerList.src = sPortlet_Img + "minus.png";
		getAttr("_div_Map_LayerList", "display:block;");
		getAttr("_divImg_LayerList", "left:" + (map_Left + map_Width - _div_Map_LayerList.offsetWidth + 2) + "px");
	}
}

function Image_OV_Click() {
	// close
	if (_divOV.offsetWidth > 10) {
		_Img_OV.alt = l_imgOV_alt_Open;
		_Img_OV.title = l_imgOV_alt_Open;
		_Img_OV.src = sPortlet_Img + "btn_expand.png";
		getAttr("_divOV", "display:none;");

		getAttr("_divImg_OV", "top:"
				+ (map_Top + map_Height - _divImg_OV.offsetHeight - 1) + "px; "
				+ "left:" + (map_Left + map_Width - _divImg_OV.offsetWidth + 5)
				+ "px");
		getAttr(
				"_divLocation",
				"left:"
						+ (map_Left + map_Width - _divLocation.offsetWidth - width_ImgOV)
						+ "px");
		ctrl_OV.minimizeControl();
	}
	// open
	else {
		_Img_OV.alt = l_imgOV_alt_Close;
		_Img_OV.title = l_imgOV_alt_Close;
		_Img_OV.src = sPortlet_Img + "btn_collase.png";
		getAttr("_divOV", "display:block;");
		getAttr("_divImg_OV", "top:" + (map_Top + map_Height - height_OV + 2)
				+ "px; left:" + (map_Left + map_Width - width_OV + 10) + "px");
		getAttr("_divLocation", "left:"
				+ (map_Left + map_Width - _divLocation.offsetWidth - width_OV)
				+ "px");
		ctrl_OV.maximizeControl();
	}
}

// lam tron so
function roundNumber(number, digit) {
	var i = 0;
	for (i = 0; i < digit; i++)
		number = number * 10;
	number = Math.round(number);
	var iDigit = 10;
	for (i = 0; i < digit; i++)
		iDigit = iDigit * (i + 1);
	return number / iDigit;
}

// cat khoang trang trong chuoi
function trim(s) {
	return rtrim(ltrim(s));
}

function ltrim(s) {
	var l = 0;
	while (l < s.length && s[l] == ' ') {
		l++;
	}
	return s.substring(l, s.length);
}

function rtrim(s) {
	var r = s.length - 1;
	while (r > 0 && s[r] == ' ') {
		r -= 1;
	}
	return s.substring(0, r + 1);
}

function removeChild_Div(objHTML) {
	try {
		if (objHTML == null)
			return;
		if (objHTML.childNodes == null)
			return;
		var i = 0;
		var len = objHTML.childNodes.length;
		for (i = 0; i < len; i++) {
			var objNode = objHTML.childNodes[i];
			if (objNode.childNodes.length)
				removeChild_Div(objNode);
			objHTML.removeChild(objNode);
			i = -1;
			len -= 1;
		}
	} catch (ex) {

	}
}

function _getElementById(id) {
	return document.getElementById(id);
}

var panelPortlet = null;
var panel_line_extension_Portlet = null;
var panel_polygon_extension_Portlet = null;
var panel_base_gis_Portlet = null;
var Action_Current = null;
var Panel_Current = null;
var p_eBackExtent = null, p_eNextExtent = null;
var isIE = false;
function initial() {
	var browserName = navigator.appName;
	if (browserName == "Microsoft Internet Explorer")
		isIE = true;
	var _div_Column2 = _getElementById("column-1");
	map_Width = _div_Column2.offsetWidth;
	var width_left = map_Width * 1 / 4;
	var width_map = map_Width - width_left;
	// map_Height = _div_Column2.offsetHeight;
	map_Top = _divMap.offsetTop;
	map_Left = _divMap.offsetLeft;

	getAttr("_div_Map_Tools", "width:" + (width_left) + "px; height:"
			+ (map_Height) + "px");
	getAttr("_divMap", "width:" + (width_map) + "px; height:" + (map_Height)
			+ "px;");

	map_Top = _div_Map_Tools.offsetTop;
	map_Left = _div_Map_Tools.offsetLeft;
	/***** control map *****/
	// layer list
	getAttr("_div_Map_LayerList", "top:" + (map_Top + 40) + "px; left:"
			+ (map_Left + map_Width - width_LayerList) + "px; " + "width: "
			+ width_LayerList + "px; height: auto; display: none;");
	getAttr("_divImg_LayerList", "top:" + (map_Top + 40)
			+ "px; left:" + (map_Left + map_Width - 12) + "px; "
			+ "width: " + width_ImgLayerList + "px; height: " + width_ImgLayerList + "px");
	
	var deltaTop_Location = 20;
	if (isIE) {
		deltaTop_Location = 20;
		height_OV = 100;
	} else {
		deltaTop_Location = 20;
		height_OV = 100;
	}
	// scale bar
	if (!isShow_ScaleBar)
		getAttr("_divScale", "display:none");
	else
		getAttr("_divScale", "top:" + (map_Top + map_Height - 30) + "px; "
				+ "left:" + (_div_Map_Tools.offsetWidth + map_Left + 15)
				+ "px; width: auto; height: auto");
	// overview map
	if (!isShow_OV) {
		getAttr("_divLocation", "top:"
				+ (map_Top + map_Height - deltaTop_Location) + "px; left:"
				+ (map_Left + map_Width - _divLocation.offsetWidth) + "px");
		getAttr("_divOV", "display:none");
		getAttr("_divImg_OV", "display:none");
	} else {
		getAttr("_divLocation", "top:"
				+ (map_Top + map_Height - deltaTop_Location) + "px; " + "left:"
				+ (map_Left + map_Width - _divLocation.offsetWidth - width_OV)
				+ "px");
		getAttr("_divOV", "top:" + (map_Top + map_Height - height_OV) + "px; "
				+ "left:" + (map_Left + map_Width - width_OV + 8)
				+ "px; width: " + width_OV + "px; height: auto");
		getAttr("_divImg_OV", "top:" + (map_Top + map_Height - height_OV + 2)
				+ "px; left:" + (map_Left + map_Width - width_OV + 10) + "px; "
				+ "width: " + width_ImgOV + "px; height: " + width_ImgOV + "px");
	}
	/**** end control map *****/
	getAttr("_div_Map_divAddFeature_Attribute", "display:none");

	/** **** panel edit ***** */
	// imgName - Selected - TypeAction - Group Index - Tooltip - Src - Line Tool
	// Extension - divContainer, imgCtrl
	var p_ePan = new Portlet_Image.create("imgname: img_map_Pan;selected:"
			+ true + ";type_action: " + Portlet_Type_Action.Default
			+ ";group_index: " + 1 + ";tooltip: Pan;imgsrc: " + sPortlet_Img
			+ "pan_off.png;toolbase: " + true, pan_map);
	var p_eFixZoomIn = new Portlet_Image.create(
			"imgname: img_map_FixZoomIn;type_action: "
					+ Portlet_Type_Action.Fix_Zoom_In + ";group_index: " + 0
					+ ";tooltip: Fix Zoom In;imgsrc: " + sPortlet_Img
					+ "zoomin.gif;toolbase: " + true);
	var p_eFixZoomOut = new Portlet_Image.create(
			"imgname: img_map_FixZoomOut;type_action: "
					+ Portlet_Type_Action.Fix_Zoom_Out + ";group_index: " + 0
					+ ";tooltip: Fix Zoom Out;imgsrc: " + sPortlet_Img
					+ "zoomout.gif;toolbase: " + true);
	var p_eMeasure = new Portlet_Image.create(
			"imgname: img_map_Measure;type_action: "
					+ Portlet_Type_Action.Mesaure + ";group_index: " + 1
					+ ";tooltip: Measure;imgsrc: " + sPortlet_Img
					+ "ruler_off.png;toolbase: " + true
					+ ";divcontainer: div_Map_Measure");
	p_eBackExtent = new Portlet_Image.create(
			"imgname: img_map_BackExtent;type_action: "
					+ Portlet_Type_Action.Back_Extent + ";group_index: " + 0
					+ ";tooltip: Back Extent;imgsrc: " + sPortlet_Img
					+ "Back_Extent_off.png;toolbase: " + true);
	p_eNextExtent = new Portlet_Image.create(
			"imgname: img_map_NextExtent;type_action: "
					+ Portlet_Type_Action.Next_Extent + ";group_index: " + 0
					+ ";tooltip: Next Extent;imgsrc: " + sPortlet_Img
					+ "Next_Extent_off.png;toolbase: " + true);
	var p_ePrint = new Portlet_Image.create(
			"imgname: img_map_print;type_action: " + Portlet_Type_Action.Print
					+ ";group_index: " + 0 + ";tooltip: Print;imgsrc: "
					+ sPortlet_Img + "print.gif;toolbase: " + true);

	var p_eIdentify = new Portlet_Image.create(
			"imgname: img_map_Identify;type_action: "
					+ Portlet_Type_Action.Identify + ";group_index: " + 1
					+ ";tooltip: Identify;imgsrc: " + sPortlet_Img
					+ "identify_off.png;toolbase: " + true);
	var p_eSearch = new Portlet_Image.create(
			"imgname: img_map_Search;type_action: "
					+ Portlet_Type_Action.Search + ";group_index: " + 0
					+ ";tooltip: Search;imgsrc: " + sPortlet_Img
					+ "search.gif;toolbase: " + true);
	var p_eAddFeature = new Portlet_Image.create(
			"imgname: img_map_AddFeature;type_action: "
					+ Portlet_Type_Action.Insert + ";group_index: " + 1
					+ ";tooltip: Add;imgsrc: " + sPortlet_Img
					+ "add_point_off.png", Draw_Obj);
	p_eAddFeature.finish = false;
	var p_eEditFeature = new Portlet_Image.create(
			"imgname: img_map_EditFeature;type_action: "
					+ Portlet_Type_Action.Edit
					+ ";group_index: "
					+ 1
					+ ";tooltip: Edit;imgsrc: "
					+ sPortlet_Img
					+ "edit_feature_off.png;divcontainer: div_Map_divModifyFeature",
			Modify_Obj);
	var p_eDelFeature = new Portlet_Image.create(
			"imgname: img_map_DelFeature;type_action: "
					+ Portlet_Type_Action.Delete + ";group_index: " + 1
					+ ";tooltip: Delete;imgsrc: " + sPortlet_Img
					+ "remove_point_off.png", Del_Obj);
	var p_eSaveFeature = new Portlet_Image.create(
			"imgname: img_map_Save;type_action: " + Portlet_Type_Action.Save
					+ ";group_index: " + 0 + ";tooltip: Save;imgsrc: "
					+ sPortlet_Img + "save_features_off.png", Save_Obj);

	// argument: divName - portlet item - index
	panelPortlet = new Portlet_Panel.create("div_Map_divToolbar", p_ePan,
			p_eFixZoomIn, p_eFixZoomOut, p_eBackExtent, p_eNextExtent,
			p_eIdentify, p_eSearch, p_eMeasure, p_ePrint, p_eAddFeature,
			p_eEditFeature, p_eDelFeature, p_eSaveFeature,
			Potrlet_Panel_Collection.length, false);
	Potrlet_Panel_Collection[Potrlet_Panel_Collection.length] = panelPortlet;
	Panel_Current = panelPortlet;

	/** **** panel line extension ***** */
	if (isTool_Extension) {
		var p_lAddLine_Extension = new Portlet_Image.create(
				"imgname: img_map_Polyline_AddExtension;type_action: "
						+ Portlet_Type_Action.Add_Line_Extension
						+ ";group_index: "
						+ 1
						+ ";tooltip: Add line;imgsrc: "
						+ sPortlet_Img
						+ "add_point_off.png;divcontainer: div_Map_divAddFeature;line_extension: "
						+ true + ";polygon_extension: " + false);
		var p_lDel_Vertex = new Portlet_Image.create(
				"imgname: img_map_Polyline_Del_Vertext;type_action: "
						+ Portlet_Type_Action.Del_Vertext + ";group_index: "
						+ 1 + ";tooltip: Delete Vertext;imgsrc: "
						+ sPortlet_Img + "remove_point_off.png"
						+ ";line_extension: " + true + ";polygon_extension: "
						+ true);
		var p_lSplit = new Portlet_Image.create(
				"imgname: img_map_Polyline_Split;type_action: "
						+ Portlet_Type_Action.Split + ";group_index: " + 1
						+ ";tooltip: Split;imgsrc: " + sPortlet_Img
						+ "split_off.png" + ";line_extension: " + true
						+ ";polygon_extension: " + true);
		var p_lMerge = new Portlet_Image.create(
				"imgname: img_map_Polyline_Merge;type_action: "
						+ Portlet_Type_Action.Merge
						+ ";group_index: "
						+ 1
						+ ";tooltip: Merge;imgsrc: "
						+ sPortlet_Img
						+ "merge_off.png;"
						+ "divcontainer: div_Map_Merger_Feature;line_extension: "
						+ true + ";polygon_extension: " + true);
		/*
		 * var p_l5 = new Portlet_Image.create("imgname:
		 * img_map_Polyline_Extent;type_action: " + Portlet_Type_Action.Extent +
		 * ";group_index: " + 1 + ";tooltip: Extent;imgsrc: " + sPortlet_Img +
		 * "extent_off.png" + ";line_extension: " + true + ";polygon_extension: " +
		 * true); var p_l6 = new Portlet_Image.create("imgname:
		 * img_map_Polyline_Trim;type_action: " + Portlet_Type_Action.Trim +
		 * ";group_index: " + 1 + ";tooltip: Trim;imgsrc: " + sPortlet_Img +
		 * "trim_off.png" + ";line_extension: " + true + ";polygon_extension: " +
		 * true);
		 */

		// argument: divName - portlet item - index
		panel_line_extension_Portlet = new Portlet_Panel.create(
				"div_Map_divToolbar_LineExtension", p_lAddLine_Extension, p_lSplit, p_lMerge,
				Potrlet_Panel_Collection.length, true);
		Potrlet_Panel_Collection[Potrlet_Panel_Collection.length] = panel_line_extension_Portlet;
	} else
		panel_line_extension_Portlet = null;

	// tool bar
	_div_Map_divToolbar.style.width = "255px";
	var topToolbar = map_Top;
	if (isIE)
		topToolbar += 5;
	else
		topToolbar += 5;
	getAttr("_div_Map_divToolbar", "top:" + topToolbar + "px; left:"
			+ (map_Left + map_Width - _div_Map_divToolbar.offsetWidth) + "px; "
			+ "width: auto; height: auto; display: block");
	getAttr(
			"_div_Map_divToolbar_LineExtension",
			"top:"
					+ (topToolbar + _div_Map_divToolbar.offsetHeight)
					+ "px; left:"
					+ (map_Left + map_Width - _div_Map_divToolbar_LineExtension.offsetWidth)
					+ "px; " + "width: auto; height: auto; display: none");

	/** **** panel tool base gis ***** */
	panel_base_gis_Portlet = null;

	_img_Map_ShowHide.src = sPortlet_Img + "Hide.png";
	_img_Map_ShowHide.title = _img_Map_ShowHide.alt = "Hide";
	_img_Map_ShowHide.onclick = showhideLeftPanel;

	//showhideLeftPanel();
	init_langauge();
}

function showhideLeftPanel() {
	var width_left = map_Width * 1 / 4;
	var width_map = map_Width - width_left;
	if (_div_Map_Tools.style.display == "none") {
		width_map = map_Width - width_left;
		$('#div_Map_Tools').show();
		$('#div_Map_Tools').animate({
			width : width_left + "px"
		}, 500, function() {
			$('#div_Map_Tools').show();
		});
		$('#td_Map_Tools').show();
		$('#td_Map_Tools').animate({
			width : width_left + "px"
		}, 500);

		_img_Map_ShowHide.src = sPortlet_Img + "Hide.png";
		this.title = this.alt = "Hide";
	} else {
		width_map = map_Width;
		$('#div_Map_Tools').animate({
			width : "0px"
		}, 500, function() {
			$('#div_Map_Tools').hide();
		});
		$('#td_Map_Tools').show();
		$('#td_Map_Tools').animate({
			width : "0px"
		}, 500, function() {
			$('#td_Map_Tools').hide();
		});
		_img_Map_ShowHide.src = sPortlet_Img + "Show.png";
		this.title = this.alt = "Show";
	}
	$('#map').animate({
		width : width_map + "px"
	}, 500, function() {
		$('#map').show();
		map.updateSize();
	});
}

function init_langauge() {
	_ImgLayerList.alt = l_imgOV_alt_Open;
	_ImgLayerList.title = l_imgOV_alt_Open;
	
	_Img_OV.alt = l_imgOV_alt_Close;
	_Img_OV.title = l_imgOV_alt_Close;
	
	/** **** map portlet ***** */
	// / add feature ///
	// attribute
	// _getElementById("span_Map_AddFeature_Attribute").innerHTML +=
	// l_th_Map_AddFeature;
	// geometry
	_getElementById("span_Map_AddFeature").innerHTML += l_th_Map_AddFeature;
	// _getElementById("span_Map_AddFeature_Normal").innerHTML +=
	// l_td_Map_AddFeature_Normal;
	_getElementById("span_Map_AddFeature_Angle").innerHTML += l_td_Map_AddFeature_Angle;
	_getElementById("span_Map_DirectionFeature").innerHTML += l_td_Map_AddFeature_Angle;
	_getElementById("span_Map_AddFeature_Parallel").innerHTML += l_td_Map_AddFeature_Parallel;
	_getElementById("span_Map_ParallelFeature").innerHTML += l_td_Map_AddFeature_Parallel;
	_getElementById("span_Map_AddFeature_Direction").innerHTML += l_td_Map_AddFeature_Direction;
	// _getElementById("span_Map_AddFeature_Vertext").innerHTML +=
	// l_td_Map_AddFeature_Vertext;
	_getElementById("span_Map_AddFeature_Copy").innerHTML += l_td_Map_AddFeature_Copy;
	_getElementById("btn_Map_AddFeature").value = l_btn_Map_AddFeature;
	_getElementById("btn_Map_OK_Direction").value = l_btn_Map_AddFeature;
	_getElementById("btn_Map_OK_Parallel").value = l_btn_Map_AddFeature;
	// modify feature
	_getElementById("span_Map_ModifyFeature").innerHTML += l_th_Map_ModifyFeature;
	_getElementById("span_Map_ModifyFeature_Drag").innerHTML += l_td_Map_ModifyFeature_Drag;
	_getElementById("span_Map_ModifyFeature_Vertex").innerHTML += l_td_Map_ModifyFeature_Vertex;
	_getElementById("span_Map_ModifyFeature_Attribute").innerHTML += l_td_Map_ModifyFeature_Attribute;
	_getElementById("span_Map_FeatureSelected").innerHTML += l_td_Map_FeatureSelected;
	_getElementById("span_Map_ModifyFeature_UnFeatureSelected").innerHTML += l_td_Map_ModifyFeature_UnFeatureSelected;
	// delete
	_getElementById("span_Map_ModifyFeature_DelVertex").innerHTML += l_td_Map_ModifyFeature_DelVertex;
	// merge feature
	_getElementById("span_Map_Merge_Feature").innerHTML += l_th_Map_Merge_Feature;
	_getElementById("span_Map_Merge_Feature_List").innerHTML += l_td_Map_Merge_Feature_List;
	_getElementById("btn_Map_Merge_Action").value = l_btn_Map_AddFeature;
	_getElementById("btn_Map_Merge_Cancel").value = l_btn_Map_Cancel;
}

// options
// top: value; left: value;
function getAttr(divObj, options) {
	if (_getElementById(divObj) != null) {
		divObj = "document.getElementById('" + divObj + "')";
	}
	var optionSplit = options.split(';');
	if (optionSplit.length == 0)
		return;
	var i = 0;
	for (i = 0; i < optionSplit.length; i++) {
		var sAttr = optionSplit[i];
		sAttr = sAttr.split(':');
		if (sAttr.length != 2)
			continue;
		var sKey = trim(sAttr[0]).toLowerCase();
		var sValue = trim(sAttr[1]).toLowerCase();
		var sEVal = divObj + ".style." + sKey + "='" + sValue + "'";
		eval(sEVal);
	}
}
/** ********* end function init interface ********* */
